<script setup>
import { ref } from "vue";
import { useRouter } from 'vue-router';
import { Upload } from '@/api/index';
import { Register } from "@/api";
import { showSuccessToast } from 'vant';
const username = ref('');
const userNickName = ref('');
const password = ref('');
const router = new useRouter();
const checked = ref('1');
const photo = ref('');
const show = ref(false);
const onSubmit = () => {

    console.log('submit', avatar.value[0].url);
    Register({
        username: username.value,
        password: password.value,
        userNickName: userNickName.value,
        userAvatarUrl: photo.value,
        userSex: checked.value
    })
        .then(function (response) {
            if (response.code != 2000) {
                console.log(response.msg);
            }
            show.value = true;
            setTimeout(() => {
                show.value = false;
                router.push('/login')
                showSuccessToast('注册成功');
            }, 1000);

        })

};

const afterRead = (file) => {
    console.log(file);
    Upload({
        photoFile: file.file
    })
        .then(function (response) {
            console.log(response.data);
            avatar.value[0].url = response.data;
            file.status = 'uploading';
            file.message = '上传中...';
            setTimeout(() => {
                if (response.code == 2000) {
                    file.status = 'success';
                    photo.value = response.data;
                }

            }, 1000);
        })
}

const onClickLeft = () => router.push('/login');
const avatar = ref([]);
</script>

<template>
    <van-overlay :show="show">
        <div class="wrapper" @click.stop>
            <van-loading type="spinner" size="40px" color="#0094ff" vertical>加载中...</van-loading>
        </div>
    </van-overlay>
    <div class="">
        <van-nav-bar title="注册" left-text="返回" left-arrow @click-left="onClickLeft" />
        <van-form @submit="onSubmit">
            <van-cell-group inset>
                <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名"
                    :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="userNickName" name="昵称" label="昵称" placeholder="昵称"
                    :rules="[{ required: true, message: '昵称' }]" />
                <van-field name="userSex" label="性别">
                    <template #input>
                        <van-radio-group v-model="checked" direction="horizontal">
                            <van-radio name="1">男</van-radio>
                            <van-radio name="2">女</van-radio>
                        </van-radio-group>
                    </template>
                </van-field>
                <van-field name="uploader" label="头像">
                    <template #input>
                        <van-uploader v-model="avatar" :after-read="afterRead" multiple :max-count="1" :rules="[{required:false}]" />
                        
                    </template>
                </van-field>

                <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button round block type="primary" native-type="submit">
                    注册
                </van-button>
            </div>
        </van-form>

    </div>
</template>

<style lang="scss" scoped>
.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    width: 120px;
    height: 120px;
    background-color: #fff;
}
</style>
